<template>
  <div>
    <el-col>
      <el-tag>用户总人数:{{ user.total }}</el-tag>
    </el-col>
    <el-table
        :data="user.records"
        class="table"
    >
      <el-table-column
          fixed
          prop="id"
          label="用户id"
          width="200"
      >
      </el-table-column>
      <el-table-column
          prop="username"
          label="用户名"
          width="120"
      >

      </el-table-column>

      <el-table-column
          label="课程头像"
          width="100">
        <template slot-scope="scope">
          <el-avatar :src="scope.row.userImg"></el-avatar>
        </template>
      </el-table-column>

      <el-table-column
          prop="userIntroduce"
          label="用户介绍"
          width="150"
      >
      </el-table-column>
      <el-table-column
          prop="userTelephone"
          label="用户电话"
          width="150"
      >
      </el-table-column>
      <el-table-column
          prop="userEmail"
          label="用户邮箱"
          width="150"
      >
      </el-table-column>

      <el-table-column
          fixed="right"
          label="操作"
      >
        <template slot-scope="scope">
          <el-button @click="handleDelete(scope.row)" type="danger">删除用户</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
        background
        :current-page="user.current"
        :page-size="user.size"
        @current-change="change"
        layout="prev, pager, next"
        :total="user.total"
    >
    </el-pagination>

    <el-dialog
        title="删除课程"
        :visible.sync="dialogVisible"
        width="30%"
    >
      <span>删除课程信息</span>
      <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
         <el-button @click="Delete">确定删除</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>

import {selectAllUser, deleteUser} from "../../api/user";

export default {
  name: 'User',
  data() {
    return {
      user: {},
      dialogVisible: false,
      id: ''
    }
  },
  mounted() {
    // 获取课程信息
    this.change(1)
  },
  methods: {
    // 点击删除按钮
    handleDelete(row) {
      this.id = row.id
      this.dialogVisible = true
    },

    // 删除课程
    Delete() {
      deleteUser(this.id).then(result => {
        this.$message({
          type: 'success',
          duration: 2 * 1000,
          message: result.data.user
        })
        this.change(1)
      }).catch(error=>{
        this.$message({
          type: 'error',
          duration: 2 * 1000,
          message: error.message
        })
      })
      this.dialogVisible=false
    },
    change(number) {
      selectAllUser(number).then(result => {
        this.user = result.data.user
      }).catch(error => {
        console.log(error)
        this.$message({
          type: "success",
          duration: 2 * 1000,
          message: error.message
        })
      })
    }
  }
}
</script>

<style scoped>

</style>
